/* variables */

:root {
  --primary-bg: #453f36;
  --primary-color: #0d1117;
  --secondary-bg: #67c2bf;
  --secondary-color: #c7d2dd;
  --cta-bg: #ffad3b;
  --cta-color: #0f0d01;
}

/* fonts */
    @font-face{
  font-family: font1;
  src: url(https://cybergirl555.online/fonts/comic-sans/Ldfcomicsans-jj7l.ttf);
}
    @font-face{
  font-family: sg1;
  src: url(https://cybergirl555.online/fonts/sg/STARGATE.TTF);
}
    @font-face{
  font-family: sgt;
  src: url(https://cybergirl555.online/fonts/sg/Stargate-SG1-Go-ald.ttf);
}
    @font-face{
  font-family: n3270;
  src: url(https://cybergirl555.online/fonts/3270/3270NerdFont-Regular.ttf);
}
    @font-face{
font-family: ng;
  src: url(https://cybergirl555.online/fonts/gohu/GohuFont11NerdFontMono-Regular.ttf);
}
    @font-face{
font-family: nbbt;
  src: url(https://cybergirl555.online/fonts/bbt/BigBlueTerm437NerdFont-Regular.ttf);
}
/* */

html, body {
  height: 100%;
  font-family: ng;
}
*{
  margin:0;
  padding:0;
}
html {
  font-family: sg1;
  font-size: 22px;
}
body {
  display: flex;
  flex-direction: column;
  margin-bottom: 5rem;
}

body * {
}

p {
  font-family: ng;
}

h1,h2,h3,h4,h5 {
  font-family: sg1;
}

/* Nav/Body/Footer */
#logo {
height: 100%;
width: auto;

}

#header {
 height: 4rem;
 flex-shrink: 0;
 position: sticky;
 top: 0;
 z-index:1000;
 display: flex;
 align-items: center;
 padding: 0 1.5rem;
 justify-content: flex-start;
 flex-direction: row;
 width: 96.2%;
 overflow-y: hidden;
 border-bottom: black ridge 2px; 
 
 background-color: var(--secondary-bg);
 color: var(--secondary-color);
}

#header * {
    
}


/* navbar hover highlight effect*/
#header a {
  text-decoration: none;
  position: relative;
  overflow: hidden;
  color: var(--secondary-color);
  background-color: var(--secondary-bg);
  margin: 0.25rem;
  margin-left: 0.5rem;
  padding-left: 0.25rem;
  height: 1.5rem;
  border-left: 1px ridge var(--secondary-color);
  border-radius: 1px
}

#header a:nth(1){
    border-left: none;
}

#header a:hover{
  color: var(--secondary-bg);
  background-color: var(--secondary-color);
}

#header a:hover::after {
  width: 100%;
  animation: heartbeat_hover 1.5s ease-in-out 0.3s infinite;
}

#header a::after{
  content: "";
  position: absolute;
  left: 5px;
  bottom: 0px;
  height: 5px;
  background-color: var(--cta-color);
  width: 0%;
  transition: width 0.3s ease;
  overflow: visible;
  z-index: 1001;
}

@keyframes heartbeat_hover {
  0%, 100% {
    width: 100%;
  }
  50% {
    width: 60%;
  }
}

/*set the active tab in navigation to active class so is easy to see where one is on the site from a glance at the header*/
.active {
    color: var(--secondary-bg);
    background-color: var(--secondary-color);
    border-radius: 0.25rem;
}

#header

#main { 
  background-color: var(--primary-bg);
  color: var(--primary-color);
  flex-grow: 1;
  width: 100vw;
}

#footer {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  background-color: var(--cta-bg);
  color: var(--cta-color);
  font-family: sg1;
  height: 4rem;
  padding: 1.6rem;
}

#footer * {
  
}

/* Fixed BG */
.fixed-bg {
  position: relative;
  width: 100%;
  /*min-height: 20rem;*/
  clip-path: inset(0);
  overflow: hidden;
  margin-bottom: 2rem;
  text-shadow: 1px 1px #222;
  background-color: #ffffff77;
}
.fixed-bg p {
  background-color: #453f3686;
  margin: 1rem;
}
.fixed-bg img {
  position: fixed;
  top: -5vh;
  left: -5vw;
  width: 110vw;
  height: 110vh;
  object-fit: cover;
  object-position: center;
  z-index: -1;
  opacity: 0.9
}

#main {
  background-color: var(--primary-bg);
  color: white;
}